<!-- 创建时间: 2020年12月30日 星期三 11:43 -->
<template>
    <div class="examinationRecord_container">
        <div class="message"
             v-show="examinationRecord.length == 0">
            暂无考试记录
        </div>
        <el-row :gutter="20">
            <el-col :xs="24"
                    :sm="12"
                    :md="6"
                    v-for="(item, index) in examinationRecord"
                    :key="index">
                <el-card class="box-card">
                    <div class="teacherName">教师: {{item.teacherName}}</div>
                    <div class="coursesNameStyle">
                        {{ item.coursesName }}
                    </div>
                    <el-tag class="result">{{ item.startTime }} / {{ item.endTime }}</el-tag>
                    <el-tag :type="item.course == null ? 'danger' : 'success'"
                            class="result">
                        {{ item.course == null ? "未参考" : item.course }}
                    </el-tag>
                    <el-button title="查看试题分析"
                               class="checkView"
                               icon="el-icon-view"
                               circle
                               :disabled="!item.studentPreview"
                               @click="checkView(item)"></el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import $ from "jquery";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            examinationRecord: [], // 考试记录
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 自动获取考试记录信息
        autoGetStudentExaminationRecord () {
            let studentNumber = this.$store.getters.getUserNumber;
            if (
                studentNumber == "" ||
                this.$store.getters.getUserName == "" ||
                !JSON.parse(sessionStorage.getItem("flag"))
            )
                return;
            let classNumber = this.$store.getters.getUserNumber.substring(0, 7);
            this.$http
                .post("autoGetStudentExaminationRecord", {
                    classNumber: classNumber,
                    studentNumber: studentNumber,
                })
                .then((res) => {
                    if (res.body != "") {
                        this.examinationRecord = res.body;
                    } else {
                        this.$message.warning("数据获取失败，请刷新页面后重试");
                    }
                });
        },
        // 查看试题分析
        checkView (item) {
            this.$store.commit("setAddQuestions", item);
            this.$http
                .post("autoGetQuestionBankInfo", {
                    questionBankName: item.questionBank,
                })
                .then((res) => {
                    let str = JSON.parse(res.bodyText);
                    for (let i = 0; i < str.length; i++) {
                        str[i].optionList = str[i].optionList.split("&");
                        if (str[i].type == "checkbox") {
                            str[i].rightOption = str[i].rightOption.split("&");
                        }
                    }
                    this.$store.commit("setQuestionsList", str);
                    this.$router.push({
                        path: "/student/viewPreview",
                        query: {
                            backPath: this.$route.path
                        },
                    });
                });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.autoGetStudentExaminationRecord();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.examinationRecord_container {
    padding: 10px 10px;

    .message {
        text-align: center;
        font-size: 20px;
        color: darkgray;
    }

    .box-card {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-bottom: 10px;

        .coursesNameStyle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 15px;
            background: #409eff;
            margin: auto;
            font-size: 20px;
            color: white;
            display: flex; //设置为弹性布局
            align-items: center; // 设置垂直居中
            justify-content: center; //设置水平居中
            margin-bottom: 15px;
        }

        .result {
            font-weight: bold;
            margin-bottom: 15px;
            display: block;
        }

        .checkView {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .teacherName {
            position: absolute;
            top: 10px;
            left: 10px;
            color: darkgrey;
        }
    }

    .box-card:hover {
        border: 1px solid sandybrown;
    }
}
</style>
